<template>
	<view class="houses-item" @click="goto()">
		<!-- 房屋左侧图标区域 -->
		<view class="houses-item-left">
			<!-- <image src="houses.logo" class="houses-pic"></image>
			 -->
			 <image src="/static/other_icons/house-index.png" class="houses-pic"></image>
		</view>
		<!-- 房屋右侧信息区域 -->
		<view class="houses-item-right">
			<view class="top-title">
				<text class="onsale">在售</text>
				<text class="slogan">生态宜居·品质好房</text>
			</view>
			<!-- <view class="houses-name">{{houses.name}}</view>
			<view class="houses-info">{{houses.info}}</view>
			<view class="houses-price">{{houses.price}}万元/套</view> -->
			<view class="houses-name">轻松之都</view>
			<view class="houses-info">两室一厅/80m²/深圳龙华</view>
			<view class="houses-price">113万元/套</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "houses-list-item",
		props: {
			houses: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {

			};
		},
		methods:{
			goto(){
				uni.navigateTo({
					url:'/subpkg/house_detail/house_detail'
				})
			}
		}
	}
</script>

<style lang="scss">
	.houses-item {
		display: flex;
		// margin: 20rpx 30rpx 0 30rpx;
		padding: 20rpx;
		width: 620rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;

		.houses-item-left {
			.houses-pic {
				width: 200rpx;
				height: 200rpx;
				display: block;
			}
		}

		.houses-item-right {
			margin-left: 40rpx;
			font-family: PingFang SC;
			display: flex;
			justify-content: space-between;
			flex-direction: column;

			.top-title {
				display: flex;
				flex-direction: row;

				.onsale {
					background: linear-gradient(90deg, #E93423 0%, #FB6858 100%);
					border-radius: 4rpx;
					font-size: 20rpx;
					font-weight: 500;
					color: #FFFFFF;
					width: 60rpx;
					height: 30rpx;
					text-align: center;
				}

				.slogan {
					margin-left: 17rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #333333;
				}
			}

			.houses-name {
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
			}

			.houses-info {
				font-size: 24rpx;
				font-weight: 500;
				color: #999999;
			}

			.houses-price {
				font-size: 28rpx;
				font-weight: bold;
				color: #E62129;
			}
		}
	}
</style>
